<template>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchConfig"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="supplierList"
        uniqueId="supplierListTable"
      >
      </ele-page>

      <!-- 封装的抽屉 -->
      <ele-form-drawer
        class="dialog-pack"
        :isLoading="isLoading"
        v-model="formDataDialog"
        v-bind="formDescDialog"
        :request-fn="handleSubmit"
        :visible.sync="visible"
        :title="title"
        size="60%"
      >
      </ele-form-drawer>
    </div>
</template>

<script>
import {mdmInfo, mdmU, supplierList} from "@/api/supplierManagement/supplierManagement";
import { operateList, searchConfig, rowConfig,formDescDialogMixin} from "./config"
import {getDict} from "@/api/common";
export default {
  name: "index",
  mixins:[formDescDialogMixin],
  data(){
    return{
      title: null,
      visible: false,
      isLoading: false,
      formDataDialog: {},
      loading: false,
      searchConfig, // 传入的搜索条件表单配置
      operateList, // 是table上面的按钮配置 （例如：新增、导出）
      supplierList,
      column:[
        {
          //
          prop: "vendorCode",
          width: 180,
          label: '供应商编码',
          showOverflowTooltip: true
        },
        {
          //
          prop: "vendorName",
          // width: 180,
          label: '供应商名称',
          showOverflowTooltip: true
        },
        {
          //
          prop: "contractCode",
          width: 180,
          label: '合同号',
          showOverflowTooltip: true
        },
        {
          //
          prop: "contractName",
          width: 180,
          label: '合同名称',
          showOverflowTooltip: true
        },
        {
          prop: "settlementType",
          label: '结算方式',
          optionProp: {
            value: "value",
            label: "description",
          },
          option: async (data) => {
            const list = await getDict("settlement_method")
            return list.data.result;
          },
          showOverflowTooltip: true,
        },
        {
          prop: "operate",
          label: '操作',
          width: 160,
          fixed: "right",
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
          }
        }
      ]
    }
  },
  methods:{
    /**
     * @description table表格顶部的按钮操作事件
     */
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {
        add: () => {
          this.disableFields(false)
          // 初始化弹窗表单
          this.formDataDialog = {
            deviceStandardList: [],
          }
          this.visible = true
        }
      }
      fnc[data.handleName]()
    },
    /**
     * @description table表格操作列的按钮事件
     */
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        edit: () => {
          this.disableFields(false)
          this.rowDetail(row)
        },
        detail: () => {
          this.disableFields(true)
          this.rowDetail(row)
        },
      }
      fnc[handleName]()
    },
    /**
     * @description 获取详情
     */
    rowDetail(row) {
      mdmInfo(row.rowID).then((res)=>{
        this.formDataDialog = res.data.result
        this.$nextTick(() => {
          this.visible = true
        })
      })
    },
    //弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return // 判断状态
      this.isLoading = true
      mdmU(data).then((res)=>{
        this.$message.success('修改成功')
        this.refresh()
        this.visible = false
        this.isLoading = false
      }).finally(()=>{
        // this.isLoading=false
      })
    },
    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag
      this.formDescDialog.isShowSubmitBtn = !flag
    },
  }
}
</script>

<style scoped>

</style>
